<form
  role="form"
  class="kuiVerticalRhythm"
>
  <div class="kuiBar">
    <div class="kuiBarSection">
      <div class="kuiSearchInput fullWidth">
        <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
        <input
          class="kuiSearchInput__input"
          input-focus
          disable-input-focus="disableAutoFocus"
          ng-model="query"
          placeholder="Filter..."
          class="form-control"
          name="query"
          type="text"
          autocomplete="off"
        >
      </div>
    </div>

    <div class="kuiBarSection">
      <p class="kuiText kuiSubduedText">
        {{ (hits | filter: query).length }} of {{ hitCount }}
      </p>
    </div>
  </div>
</form>

<paginate
  list="hits | filter: query"
  per-page="{{ perPage }}"
  class="kuiVerticalRhythm"
>
  <button
    class="paginate-heading list-group-item list-sort-button"
    ng-click="sortHits(hits)"
    aria-live="assertive"
  >
    <span class="kuiScreenReaderOnly">Sort by</span>
    Name
    <span
      class="fa"
      ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'">
      <span class="kuiScreenReaderOnly">({{isAscending ? 'ascending' : 'descending'}})</span>
    </span>
  </button>
  <ul class="li-striped list-group list-group-menu">
    <li class="list-group-item list-group-menu-item" ng-repeat="hit in page">
      <a
        data-test-subj="paginatedListItem-{{accessor(hit)}}"
        ng-show="userMakeUrl"
        kbn-href="{{ makeUrl(hit) }}">
        <span>{{ accessor(hit) }}</span>
      </a>

      <div ng-show="userOnSelect" ng-click="onSelect(hit, $event)">
        <span>{{ accessor(hit) }}</span>
      </div>
    </li>

    <li class="list-group-item list-group-no-results" ng-if="(hits | filter: query).length === 0">
      <p>No matches found.</p>
    </li>
  </ul>
</paginate>
